<template>
    <div id="app" class="in-container">
        <headerNav></headerNav>
        <router-view></router-view>
    </div>
</template>

<script>
    import Vue from 'vue';
    import headerNav from './components/header' //头部
    import chat from './libs/chat'
    import {Loading} from 'element-ui';

    export default {
        name: 'App',
        data() {
            return {
                headerNav: headerNav,
                eventHub:new Vue()
            }
        },
        components: {
            headerNav: headerNav
        },
        methods: {
            showNotification(title, message) {
                const h = this.$createElement;
                this.$notify({
                    title: title,
                    message: h('i', {style: 'color: teal'}, message),
                    position: 'bottom-right'
                });
            },
            socketOpen(event) {
                this.closeAllMessageBox();
                this.$message({
                    type: 'success',
                    message: '消息服务连接成功！ '
                });
            },
            socketMessage(event) {

                let data = JSON.parse(event.data);

                if(data.type.value !== 'event'){
                    // 判断是否允许浏览器通知  ‘1’ 允许  ‘2’ 不允许
                    if(localStorage.delivery === '1'){
                        this.getnottification('消息来啦',data.fromUser.name + ":" + data.content);
                    }
                    // 判断是否允许工作台自带通知  ‘1’ 允许  ‘2’ 不允许
                    if(localStorage.Workbench === '1'){
                         this.showNotification("消息来啦" ,data.fromUser.name + ":" + data.content)
                    }   
                }

                console.log(localStorage.delivery,localStorage.Workbench);


            },
            socketError(data) {
                this.closeAllMessageBox();
                this.$alert(data.message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '关闭窗口',
                    dangerouslyUseHTMLString: true,
                    callback: action => {
                        if (action === 'confirm') {
                            window.location.href="about:blank";
                            window.close();
                        }
                        if (action === 'cancel') {
                        }
                    }
                });
            },
            socketClose(event) {
                this.closeAllMessageBox();
                let that = this;
                this.$alert('消息服务出现异常，请检查您的网络是否正常！', '提示', {
                    confirmButtonText: '尝试重新连接',
                    cancelButtonText: '关闭窗口',
                    showCancelButton: true,
                    dangerouslyUseHTMLString: true,
                    callback: action => {
                        if (action === 'confirm') {
                            that.$message({
                                type: 'info',
                                message: '正在尝试连接... '
                            });
                            setTimeout(function () {
                                that.$msgbox.close();
                                chat.doConnect();
                            }, 2500);
                        }
                        if (action === 'cancel') {
                            window.location.href="about:blank";
                            window.close();
                        }
                    }
                });
            },
            getUrlParam(key) {
                let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                let result = window.location.search.substr(1).match(reg);
                return result ? decodeURIComponent(result[2]) : "";
            },
            closeAllMessageBox() {
                try {
                    this.$msgbox.close();
                } catch (e) {
                }
            },

            //  设置浏览器的notification通知
            getnottification(title, message){
                if(!('Notification' in window)){
                    alert('此浏览器不支持桌面通知');
                        // 检查用户是否同意接受通知
                }else if(Notification.permission === "granted"){   
                    var notification = new Notification(title,{
                        body:message
                    });
                    // 否则我们需要向用户获取权限
                }else if (Notification.permission !== 'denied'){    
                        Notification.requestPermission(function (permission) {
                        // 如果用户同意，就可以向他们发送通知
                        if (permission === "granted") {
                            var notification = new Notification(title,{
                                body:message
                            });
                        }
                        });
                }
            }
        },
        created() {
            let that = this;
            this.token = this.getUrlParam("token");
            let loadingInstance = Loading.service({fullscreen: true, text: "正在校验并连接消息服务..."});
            chat.addMessageListener(function (event) {
                that.socketMessage(event);
            });
            chat.addSocketOpenListener(function (event) {
                loadingInstance.close();
                that.socketOpen(event);
            });
            chat.addSocketCloseListener(function (event) {
                loadingInstance.close();
                that.socketClose(event);
            });
            chat.addErrorListener(function (data) {
                loadingInstance.close();
                that.socketError(data);
            });
            chat.init(this.token);
        }
    }
</script>

<style scoped>
    #app {
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    body {
        margin: 0;
        overflow-x: hidden;
        overflow-y: hidden;
    }
</style>
